<!--  -->
<template>
  <div class>
    <div class="datalist-top">
      <div class="datalist-top-con">
        <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-row style="float: right">
            <el-button size="small " @click="reset">重置</el-button>
            <el-button size="small " type="primary" @click="search">查询搜索</el-button>
          </el-row>
        </div>
        <div class="inputt">
          资源名称：
          <input type="text" v-model="resourname" placeholder="资源名称" class="el-input__inner" style="width:200px" />
          资源路径：
          <input
            type="text"
            placeholder="资源路径"
            class="el-input__inner"
            style="width:200px"
            v-model="resourroute"
          />
          资源分类：
          <el-select slot="prepend" placeholder="全部" v-model="resourchoice">
            <el-option label="商品模块"   value="商品模块"></el-option>
            <el-option label="订单模块"  value="订单模块"></el-option>
            <el-option label="营销模块"  value="营销模块"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="datalist" style="margin-top:20px;">
      <div class="datalist-box">
        <i class="el-icon-document"></i>&nbsp;&nbsp;
        <span>数据列表</span>
        <el-button
          class="addactivity"
          slot="reference"
          style="float: right;margin-right:15px;padding:6px 14px"
          @click="dialogFormVisible = true"
        >添加</el-button>
        <el-dialog title="添加资源" width="30%" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="资源名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" width="100"></el-input>
            </el-form-item>
            <el-form-item label="资源路径" :label-width="formLabelWidth">
              <el-input v-model="form.route" autocomplete="off" width="100"></el-input>
            </el-form-item>
            <el-form-item label="全部" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="商品模块" value="商品模块"></el-option>
                <el-option label="订单模块" value="订单模块"></el-option>
                <el-option label="营销模块" value="营销模块"></el-option>
                <el-option label="权限模块" value="权限模块"></el-option>
                <el-option label="内容模块" value="内容模块"></el-option>
                <el-option label="其他模块" value="其他模块"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动形式" :label-width="formLabelWidth">
              <el-input label-width="50px" type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <label class="el-form-item__label" style="width: 150px;">
              是否启用：
              <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </label>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addinformation">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 表格 -->
    <div class="datalist-content">
      <table class="tablee" cellspacing="0" cellpadding="0">
        <tr class="hang">
          <td style="width:99px">编号</td>
          <td style="width:243px">资源名称</td>
          <td style="width:242px">资源路径</td>
          <td style="width:241px">描述</td>
          <td style="width:159px">添加时间</td>
          <td style="width:139px; border-right: 1px solid #ececec;">操作</td>
        </tr>
        <tr class="hang" v-for="item in information2" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.resourcename}}</td>
          <td>{{item.route}}</td>
          <td>{{item.describe}}</td>
          <td>{{item.time}}</td>
          <td>
            <el-button type="text" @click="edit(item)">编辑</el-button>
            <el-dialog
              title="编辑资源"
              :visible.sync="dialogVisible"
              width="30%"
            >
              <el-form>
                <el-form-item label="资源名称" :label-width="formLabelWidth">
                  <el-input v-model="formData.resourcename" autocomplete="off" width="100"></el-input>
                </el-form-item>
                <el-form-item label="资源路径" :label-width="formLabelWidth">
                  <el-input v-model="formData.route" autocomplete="off" width="100"></el-input>
                </el-form-item>
                <el-form-item label="全部" :label-width="formLabelWidth">
                  <el-select v-model="formData.describe">
                    <el-option label="商品模块" value="商品模块"></el-option>
                    <el-option label="订单模块" value="订单模块"></el-option>
                    <el-option label="营销模块" value="营销模块"></el-option>
                    <el-option label="权限模块" value="权限模块"></el-option>
                    <el-option label="内容模块" value="内容模块"></el-option>
                    <el-option label="其他模块" value="其他模块"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="modify">确 定</el-button>
              </span>
            </el-dialog>
            <button @click="del(item)">删除</button>
          </td>
        </tr>
      </table>
    </div>
    <!-- 搜索 -->
    <div class="search">
      <div class="search-rigth">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="8"
          style="float:right"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
const defaultListQuery = {
  pageNum: 1,
  pageSize: 5,
  keyword: null,
};
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      resourname:'', //资源名称
      resourroute:'', //资源路径
      resourchoice:"",  //资源分类
      currentPage: 1, // 当前页
      pageSize: 5, //
      listQuery: Object.assign({}, defaultListQuery),
      //表操作
      options: [
        {
          xx: "选项1",
          label: "删除",
        },
      ],
      value: true, //开关
      dialogFormVisible: false, //遮罩层
      dialogVisible: false,
      information2:[],
      information: [
        //添加的表信息
      ],
      form: {
        name: "", // 资源名称
        route: "", //路径
        region: "", //选择活动区域
        desc: "", //活动形式
        delivery: false,
      },
      formLabelWidth: "120px",
      //编辑
      formData: {
        resourcename: "",
        route: "",
        describe: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //重置输入框
    reset(){
      this.resourname="",
      this.resourroute="",
      this.resourchoice="",
      this.$router.go(0)
    },
    // 查询搜索
    search(){
      var params ={}
      if(this.resourname){
       params.q=this.resourname
      }
      if(this.resourroute){
        params.route=this.resourroute
      }
      if(this.resourchoice){
        params.describe=this.resourchoice
      }
      // this.$axios.get("/permission",{
      //   params
      // }).then(response=>{
      //   this.information = response;
      //   this.information2 =this.information.slice(0,this.pageSize)
      // })
    },
    // 显示编辑内容
    edit(item) {
      this.formData = {
        id:item.id,
        resourcename: item.resourcename,
        route: item.route,
        describe: item.describe,
      };
      this.dialogVisible = true;
    },
    // 修改编辑内容
    modify(item){
      this.$axios.patch('/permission/'+this.formData.id,this.formData).then(res=>{
        console.log(res)
      })
    this.dialogVisible = false
    },
    // 新增表信息
    addinformation() {
      (this.dialogFormVisible = false),
        this.$axios
          .post("db.json", {
            id: "",
            resourcename: this.form.name,
            route: this.form.route,
            describe: this.form.desc,
            time: this.setTime(),
          })
          .then(function (response) {
            console.log(response, "成功");
          })
          .catch(function (error) {
            console.log(error);
            alert("失败");
          });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.information2 = this.information.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.information2 = this.information.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    // 时间
    setTime() {
      var times;
      var date = new Date();
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + " ";
      times = Y + M + D;
      return times;
    },
    // 删除
    // this.$axios.delete('/data1/'+'W8hkqm3'),then(res=>{
    //   console.log(res);
    del: function (item) {
      // this.information.forEach((it, ind, arr) => {
      //   if (it.id == item.id) {
      //     this.information.splice(ind, 1);
      //   }
      // });
      this.$axios.delete("/permission/"+item.id).then(res=>{
        console.log(res)
      })
    },
    // })
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
            this.$axios
      .get("db.json")
      .then((res) => {
        console.log(res)
        this.information = res.permission;
        this.information2 = res.permission;
        console.log(this.information )
      })
      .catch((err) => console.log(err));
    // 1   psot为添加
    // this.$axios.post('/data1', {
    //     name: 2,
    //     age: 1,
    //     friends: []
    //  }) .then(function (response) {
    //     console.log(response)
    //  })
    //     .catch(function (error) {
    //       console.log(error)
    //       alert('失败')
    //     })

    // 把数据添加到表里面
    // this.$axios
    //   .get("/permission")
    //   .then((response) => {
    //     console.log(response);
    //     // 保存请求到的数据
    //     this.information = response;
    //     this.information2 =this.information.slice(0,this.pageSize)
    //   })
    //   .catch(function (error) {
    //     console.log(error);
    //     alert("失败");
    //   });

    // 2delete为删除，自己带id过去，这个插件会自动过滤的 /后面的为id  不用管直接传就好了 他会识别的
    // this.$axios.delete('/data1/'+'W8hkqm3'),then(res=>{
    //   console.log(res);
    // })

    // 3get 为获取
    //4 put..为修改某一个值
    // https://www.jianshu.com/p/9cfc5cdb0aeb 访问该网址教你怎么用
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
.app-main {
  min-height: 100%;
}
.miaosha-box {
  padding: 20px;
}
.app-main .miaosha-box .search-Box,
.datalist {
  width: 1127px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  border-radius: 4px;
  margin: 0 auto;
}
.app-main .miaosha-box .search-Box .search-box,
.datalist-box {
  padding: 20px;
}
.app-main .miaosha-box .miaosha-input {
  width: 380px;
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-top: 30px;
}
.app-main .miaosha-box .miaosha-input span {
  width: 130px;
  margin-left: 60px;
}
.addactivity span {
  width: 82px;
  height: 12px;
  line-height: 12px;
  font-size: 12px;
}
.datalist-content {
  width: 1127px;
  min-height: 48px;
  margin: 20px auto;
}
.hang {
  height: 48px;
}
.tablee > tr > td {
  border: 1px solid #ececec;
  text-align: center;
  line-height: 48px;
  border-right: none;
}
.tablee > tr > td > button {
  border: 0;
  outline: none;
  padding: 5px;
  background: #fff;
  margin-right: 10px;
  font-size: 12px;
  border: 1px solid #ececec;
}
.search {
  width: 1127px;
  margin: 10px auto;
}
.search-left {
  float: left;
}
.search-left > button {
  border: 0;
  outline: none;
  background: #409eff;
  padding: 10px 15px;
  color: #fff;
  margin-left: 20px;
}
.datalist-top {
  width: 1127px;
  height: 127px;
  border: 1px solid #ececec;
  margin: 20px auto;
}
.datalist-top-con {
  padding: 20px;
}
.inputt {
  padding: 20px;
  font-size: 12px;
}
.inputt > input {
  margin-right: 40px;
}
</style>